<template>
  <div class="login">
    <van-nav-bar
      title="用户登录"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="container">
      <div class="title mt-5">
        <h3>手机号登录</h3>
        <p class="text-black-50">未注册的手机号登录后将自动注册</p>
      </div>
      <div class="form">
        <div class="form-item mb-2">
          <input type="tel" class="form-control py-2 pb-3" v-model="phoneNumber" placeholder="请输入手机号">
        </div>
        <div class="form-item mb-2 d-flex justify-content-between align-items-center">
          <input type="text" class="form-control py-2 pb-3" v-model="picCode" placeholder="请输入图形验证码">
          <img v-if="picUrl" :src="picUrl" alt="" @click="getGVCode">
        </div>
        <div class="form-item mb-2 d-flex justify-content-between align-items-center">
          <input type="password" class="form-control py-2 flex-grow-1 pb-3" v-model="phoneCode" placeholder="请输入短信验证码">
          <button type="button" class="btn btn-code line no-focus" @click="getPhoneCode">
            {{totalSecond === second ? '获取验证码' : `重新发送(${second})秒`}}
          </button>
        </div>
      </div>
      <div class="login-btn mt-5">
        <button type="button" class="btn btn-lg btn-danger d-block w-100" @click="login">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import { getGVCode, getSMSCaptcha, loginByCaptcha } from '@/api/login'
export default {
  name: 'LoginIndex',
  data () {
    return {
      phoneNumber: '', // 手机号
      picCode: '', // 验证码
      picUrl: '', // 验证码图片地址
      picKey: '', // 验证码key
      phoneCode: '', // 短信验证码
      second: 60, // 倒计时
      totalSecond: 60, // 总倒计时
      timer: null // 定时器
    }
  },
  created () {
    this.getGVCode()
  },
  methods: {

    // 获取图形验证码
    async getGVCode () {
      const { data: { base64, key } } = await getGVCode()
      this.picUrl = base64
      this.picKey = key
    },
    // 校验手机号 和 验证码
    validFn () {
      if (!/^1[3456789]\d{9}$/.test(this.phoneNumber)) {
        // 匹配手机号码^ 表示字符串的起始位置。
        // 1 表示手机号必须以数字1开头。
        // [3456789] 表示第二位必须是3、4、5、6、7、8或9中的一个。
        // \d{9} 表示后续的9位必须是数字。
        // $ 表示字符串的结束位置。 // 测试用13811115555
        this.$toast('请输入正确的手机号')
        return false
      }
      if (!/^[A-Za-z0-9]{4}$/.test(this.picCode)) { // 匹配由字母和数字组成的验证码，长度为4。
        this.$toast('请输入正确的图形验证码')
        return false
      }
      return true
    },

    // 获取短信验证码，倒计时功能
    async getPhoneCode () {
      // 校验手机号 和 验证码成功后才可以开启倒计时
      if (!this.validFn()) return
      if ((this.totalSecond === this.second) && !this.timer) {
        // 发送验证码  测试环境验证码为: 246810
        await getSMSCaptcha(this.picCode, this.picKey, this.phoneNumber)
        this.$toast('发送成功，请注意查收')
        console.log('login->index.vue 测试环境验证码为: 246810')

        // 倒计时功能
        this.timer = setInterval(() => {
          this.second--
          if (this.second === 0) {
            clearInterval(this.timer)
            this.second = this.totalSecond
            this.timer = null
          }
        }, 1000)
      }
    },

    // 登录
    async login () {
      // 校验手机号 和 验证码成功后才可以登录
      if (!this.validFn()) return
      if (!/^\d{6}$/.test(this.phoneCode)) { // 匹配六位数字的验证码，常用于短信验证。
        this.$toast('请输入正确的短信验证码')
        return
      }
      const res = await loginByCaptcha(this.phoneNumber, this.phoneCode)
      this.$store.commit('user/setUserInfo', res.data)
      this.$toast('成功登录')
      // 进行判断，看地址栏有无回跳地址
      // 有则跳转，没有则跳转到首页
      const url = this.$route.query.backUrl || '/'
      this.$router.replace(url)
    }
  },
  // 组件销毁时清除定时器,防止内存泄漏
  destroyed () {
    clearInterval(this.timer)
  }
}

</script>

<style lang="less" scoped>
  // 中间表单样式
  .form{
    .form-item{
      border-bottom: 1px solid #efefef ;
    }
    //去除input点击高亮效果
    input {
      height: 45px;   // 高度
      outline: none;
      border: none;
      -webkit-appearance: none;
      appearance: none;
      background-color: transparent !important;
      &:focus{
        outline: none !important;
        box-shadow: none !important;
        background-color: transparent !important;
      }
    }
    img{
      height: 45px;
      vertical-align: middle;
    }
    .btn:hover,
    .btn:focus {
        outline: none !important;
        box-shadow: none !important;
    }
    .btn-code{
      font-size: 14px;
      color: #848689;
      border-radius: 0;
      white-space: nowrap; /* 确保内容不换行 */
      min-width: auto;     /* 允许宽度根据内容变化 */
      flex-shrink: 0;      /* 防止按钮在某些布局中被压缩 */
    }
    .line{
        border-left:1px solid #ccc ;
    }
  }
</style>
